<template>
    <div class="box">
        <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
                <el-avatar :size="30" :src="user.avatarUrl" />
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="UserFilled" :command="0">{{ $t('message.personaldetails')
                    }}</el-dropdown-item>
                    <el-dropdown-item :icon="Unlock" :command="1">{{ $t('message.changepassword') }}</el-dropdown-item>
                    <el-dropdown-item :icon="Right" :command="2">{{ $t('message.loginout') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import { UserFilled, Unlock, Right } from '@element-plus/icons-vue'
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/admin";

const router = useRouter()
const store = useUserStore()
const {user} = storeToRefs(store)

const handleCommand = (e: number) => {
    switch (e) {
        case 0:
            router.push({ path: '/index/userinfo' })
            break;
        case 1:
            router.push({ path: '/index/changepassword' })
            break;
        case 2:
            store.loginOut()
            break;
        default:
            break;
    }
}
</script>